<template>
  <div>
    <div id="topDiv">
      <h1 id="topH1">请发表你对Vue的评论</h1>
    </div>
    <div class="container">
      <div class="row">
        <!--数据绑定，传输给指定的标签使用-->
        <Left :comments="comments"/>
        <Right v-bind:comments="comments" :deleteContent="deleteContent"/>
      </div>
    </div>
  </div>
</template>

<script>
  //1、引入组件
  import Left from "./components/Left"
  import Right from "./components/Right"

  export default {
    //2、映射组件
    components: {
      Left,
      Right
    },
    data() {
      return {
        comments: [
          {"username": "john", "content": "Vue is good"},
          {"username": "yohan", "content": "Vue is so easy"},
          {"username": "sala", "content": "Vue is nice"},
          {"username": "bobo", "content": "Vue is a idea good"}
        ]
      }
    }, methods: {
      deleteContent(index) {
        //删除指定索引的一个元素
        this.comments.splice(index, 1)
      }
    }
  }
</script>

<style scoped>
  #topDiv {
    text-align: center;
    padding-top: 70px;
    padding-right: 800px;
    width: 100%;
    height: 200px;
    background-color: #c5c3ff;
  }
</style>

